<template functional>
  <section class="sandbox-card">
    <div class="flex flex-between align-center">
      <div class="card-title card-top-title">{{ props.title }}
        <slot name="title-extra"></slot>
      </div>
      <div>
        <slot name="right"></slot>
      </div>
    </div>
    <div class="content">
      <slot></slot>
    </div>
  </section>
</template>
<script>
export default {
  name: "SectionCard",
};
</script>
<style scoped>
.sandbox-card {
  margin-top: 20px;
}

.content {
  margin-top: 20px;
}

.card-top-title {
  position: relative;
  font-size: 18px;
  color: #333;
  padding-left: 18px;
}

.card-top-title::before {
  content: "";
  display: block;
  width: 6px;
  height: 20px;
  position: absolute;
  left: 0;
  top: 2px;
  background-color: var(--theme);
}
</style>
